<template>
  <div class="are_building_info">
    <div class="all_main">
      <dragdrop :width="0" :widthLeft="'170px'">
        <template slot="left">
          <div class="all_left">
            <div class="grid-content bg-purple">
              <div class="header_title">
                <span>区域楼栋</span>
              </div>
              <div class="add_button">
                <el-button
                  type="primary"
                  @click="addarea"
                  size="mini"
                  v-if="isauth('area_edit')"
                >新增区域</el-button>
                <el-button
                  type="primary"
                  @click="addbuilding"
                  size="mini"
                  v-if="isauth('building_edit')"
                >新增楼栋</el-button>
              </div>
              <div class="tree_list">
                <!-- <el-scrollbar style> -->
                <el-tree
                  :data="treedata"
                  node-key="id"
                  default-expand-all
                  :expand-on-click-node="false"
                  @node-click="clickNode"
                  :highlight-current="true"
                  ref="tree"
                  :indent="1"
                >
                  <span
                    class="custom-tree-node"
                    slot-scope="{ node, data }"
                    :style="{paddingLeft:'0px'}"
                    @mouseenter="mouseenter(data)"
                    @mouseleave="mouseleave(data)"
                  >
                    <span :class="data.type=='area'?'colorfont':'colorfont1'">
                      <i :class="data.icon"></i>
                      {{node.label}}
                    </span>
                    <span
                      :style="{paddingLeft:'0px'}"
                      class="slot-tree"
                      v-show="data.del"
                      v-if="isauth('area_edit') && data.type == 'area'"
                    >
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="() => addend(node,data)"
                        icon="el-icon-plus"
                        v-show="data.type == 'area'?true:false"
                      ></el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="() => append(node,data)"
                        icon="el-icon-edit"
                      ></el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="() => remove(node, data)"
                        icon="el-icon-delete"
                      ></el-button>
                    </span>
                    <span
                      :style="{paddingLeft:'0px'}"
                      class="slot-tree"
                      v-show="data.del"
                      v-if="isauth('building_edit') && data.type != 'area'"
                    >
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="() => append(node,data)"
                        icon="el-icon-edit"
                      ></el-button>
                      <el-button
                        type="text"
                        size="mini"
                        @click.stop="() => remove(node, data)"
                        icon="el-icon-delete"
                      ></el-button>
                    </span>
                  </span>
                </el-tree>
                <!-- </el-scrollbar> -->
              </div>
            </div>
          </div>
        </template>
        <template slot="right">
          <div class="all_right">
            <div class="grid-content bg-purple-light area" v-if="showlist==='area'?true:false">
              <div class="header_title">
                <span>{{titlename}}</span>
              </div>
              <div class="area_building_main">
                <div v-for="(item,index) in buldingdata" :key="index" class="textbox">
                  <div class="building_list">
                    <el-card class="box-card">
                      <div class="build-padding">
                        <div class="textitem">
                          <p class="bulding_css">楼栋名称:{{item.buildingName}}</p>
                        </div>
                        <div class="textitem">
                          <span>楼层数:</span>
                          <span>{{item.floors}}</span>
                        </div>
                      </div>
                      <div class="textitemfoort">
                        <el-row class="bulding_caozuo" v-if="isauth('building_edit')">
                          <el-col :span="7" :offset="10" class="bulding_font_size">
                            <el-button type="text" icon="el-icon-edit" @click="editbulding(item)"></el-button>
                          </el-col>
                          <el-col :span="7" class="bulding_font_size1">
                            <el-button
                              type="text"
                              icon="el-icon-delete"
                              @click="deletbulding(item)"
                            ></el-button>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="grid-content bg-purple-light building"
              v-if="showlist==='building'?true:false"
            >
              <div class="header_title">
                <span>{{titlename}}</span>
              </div>
              <div class="building_room_mian">
                <el-card class="box-card1">
                  <div class="textitem1">
                    请选择楼层:
                    <div style="float: right">
                      <el-button
                        type="text"
                        icon="el-icon-s-operation"
                        @click="middlewareShow(false)"
                        v-if="unitConfig.singleMiddleware == 0"
                      >绑定整栋楼的中间件</el-button>
                    </div>
                  </div>
                  <div class="textitem2">
                    <el-row>
                      <el-col
                        id="add_room"
                        :span="2"
                        v-for="(item,index) in areabuldingfloor"
                        :key="index"
                        class="el_col_button"
                      >
                        <el-button
                          size="mini"
                          :class="{contcolor:buttonindex===index}"
                          @click="checkfloors(index)"
                        >{{index+1+'F'}}</el-button>
                      </el-col>
                    </el-row>
                    <!-- <el-button type="primary" @click="bundlegateway" size="mini">绑定网关</el-button>   -->
                  </div>
                  <div class="textitem3">
                    <div
                      v-if="buttonindex==='' || floorinformation == null ? true:false"
                      class="textitem3_box"
                    >暂无数据</div>
                    <div
                      class="textitem3_box1"
                      v-if="floorinformation!=null && Object.keys(floorinformation)!=0?true:false"
                    >
                      <div class="textitem3_box1_one">
                        当前所选:&nbsp;&nbsp;{{areaname}}&nbsp;&nbsp;{{areabuldingname}}&nbsp;&nbsp;
                        <span
                          style="color:#909399"
                        >楼层:</span>
                        <span style="color:rgb(21, 161, 147);font-weight:700">{{buttonindex+1}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399;">房间总数:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                        >{{floorinformation.roomNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">已入住房间:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                        >{{floorinformation.roomIntoNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">未入住:</span>
                        <span
                          style="color:#F56C6C;font-weight:700"
                        >{{floorinformation.roomNotIntoNum}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span
                          style="color:#909399"
                          v-if="unitConfig.singleMiddleware == 0"
                        >该楼层绑定的中间件:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                          v-if="unitConfig.singleMiddleware == 0"
                        >{{middlewareName}}</span>
                      </div>
                      <div class="textitem3_box1_one">
                        <span style="color:#909399;">无线网关&nbsp;&nbsp;在线:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                        >{{floorinformation.controllerOnLine}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">不在线:</span>
                        <span
                          style="color:#F56C6C;font-weight:700"
                        >{{floorinformation.controllerNoOnLine}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span
                          style="color:#909399"
                        >无线中继</span>&nbsp;&nbsp;
                        <span style="color:#909399">在线:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                        >{{floorinformation.repeaterOnLine||0}}</span>&nbsp;&nbsp;
                        <span style="color:#909399">不在线:</span>
                        <span
                          style="color:#F56C6C;font-weight:700"
                        >{{floorinformation.repeaterNoOnLine||0}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span
                          style="color:#909399"
                        >在线设备:</span>
                        <span
                          style="color:rgb(21, 161, 147);font-weight:700"
                        >{{floorinformation.terminalOnLine}}</span>&nbsp;&nbsp;&nbsp;
                        <span style="color:#909399">不在线设备:</span>
                        <span
                          style="color:#F56C6C;font-weight:700"
                        >{{floorinformation.terminalNoOnLine}}</span>
                      </div>
                    </div>
                    <div class="addroom" v-show="buttonindex===''?false:true">
                      <el-button
                        type="primary"
                        @click="addroom"
                        size="mini"
                        v-if="isauth('room_edit')"
                      >新增房间</el-button>
                      <el-button
                        type="primary"
                        @click="bundlegateway"
                        size="mini"
                        v-if="isauth('room_edit')"
                      >绑定网关</el-button>

                      <el-button
                        type="primary"
                        @click="middlewareShow(true)"
                        size="mini"
                        v-if="isauth('room_edit') && unitConfig.singleMiddleware == 0"
                      >绑定中间件</el-button>
                    </div>
                  </div>
                </el-card>
              </div>
              <div class="building_romm_list">
                <div v-for="(item,index) in rooomlistArr" :key="index" class="textbox">
                  <div class="building_list">
                    <el-card class="box-card">
                      <div class="textmain">
                        <div class="textitem1">
                          <div id="nam_type">
                            <span>类型:{{item.roomType | filetertype}}</span>
                            <span>编号:{{item.roomCode}}</span>
                          </div>
                          <div id="bianhao">
                            <span>名称:{{item.roomName}}</span>
                          </div>
                          <!-- <p><span class="titlename">编号:</span>{{item.roomCode}}</p>
                                  <p><span class="titlename">名称:</span>{{item.roomName}}</p>
                          <p><span class="titlename">类型:</span>{{item.roomType | filetertype}}</p>-->
                        </div>
                        <div class="textitem">
                          <template v-for="(item1,index1) in item.terminalList">
                            <p :key="index1" v-if="index1 < 5">
                              <span class="titlename">{{item1.terminalType}}:</span>
                              <span class="tittlecode">{{item1.terminalCode}}</span>
                              <span
                                class="tittlecode tittlecodeone"
                                :title="item1.terminalModel"
                              >{{item1.terminalModel}}</span>
                            </p>
                            <div
                              v-if="index1 == 5"
                              :key="index1"
                              style="margin-top:-5px;font-size:14px"
                            >......</div>
                          </template>
                        </div>
                      </div>
                      <div class="textitemfoort">
                        <el-row class="bulding_caozuo" v-if="isauth('room_edit')">
                          <el-col :span="7" :offset="10" class="bulding_font_size">
                            <el-button type="text" icon="el-icon-edit" @click="editbroom(item)"></el-button>
                          </el-col>
                          <el-col :span="7" class="bulding_font_size1">
                            <el-button type="text" icon="el-icon-delete" @click="deletroom(item)"></el-button>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </div>
                </div>
              </div>
              <div class="page" v-show="recordCount>10?true:false">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChangepage"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30, 40, 50]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="recordCount"
                ></el-pagination>
              </div>
            </div>
          </div>
        </template>
      </dragdrop>
    </div>
    <!-- 绑定中间件 -->
    <el-dialog
      width="450px"
      custom-class="customWidth"
      center
      title="绑定中间件"
      :before-close="middlewarecloseDialog"
      :close-on-click-modal="false"
      :visible.sync="middlewareVisible"
    >
      <el-form
        :inline="true"
        :model="middlewareFrom"
        :rules="middlewareFromRule"
        size="mini"
        ref="middlewareFrom"
      >
        <el-form-item label="中间件" prop="middlewareGuid">
          <el-select
            v-model="middlewareFrom.middlewareGuid"
            placeholder="请选择"
            style="width:100%"
            filterable
            clearable
            size="mini"
          >
            <el-option
              v-for="item in middlewareOption"
              :key="item.middlewareGuid"
              :label="item.middlewareName"
              :value="item.middlewareGuid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="middlewarecloseDialog">取消</el-button>
        <el-button type="primary" @click="middlewareSubmit" v-if="isFloor">确定</el-button>
        <el-button type="primary" @click="middlewareBuldSubmit" v-else>确定</el-button>
      </span>
    </el-dialog>
    <!-- 新增弹窗 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getarea"
      @editbuldinglist="getbulidinglist"
      @callbackclick="callbackclick"
      :unitGuid="changeschoolid"
      :arealsit="arealsit"
      :principalarr="principalarr"
    ></add-or-update>
    <!--房间模块新增  -->
    <AddRoomUpdate
      v-if="addroomupdateVisible"
      ref="AddRoomUpdate"
      @deletroomlist="afterDeleteRoom"
      :unitGuid="changeschoolid"
    ></AddRoomUpdate>
    <!-- 修改房间  -->
    <EidtRoom
      v-if="editroomVisible"
      ref="eidtRoom"
      :unitGuid="changeschoolid"
      @eidtroomlist="afterDeleteRoom"
    ></EidtRoom>
  </div>
</template>

<script>
import AddOrUpdate from './area-building-add-update'
import AddRoomUpdate from './are-building-room-add-update'
import EidtRoom from './area-building-room-eidt'
import { isURL } from '@/utils/validate'
export default {
  data() {
    return {
      userGuid: '',
      treedata: [],
      addOrUpdateVisible: false,
      addroomupdateVisible: false,
      editroomVisible: false,
      arealsit: [],
      //区域与楼栋切换展示
      showlist: '',
      //滑入滑出树状图标隐藏
      del: false,
      areaid: '',
      buldingdata: [],
      //区域名
      titlename: '',

      //选择区域楼栋名
      areabuldingname: '',
      // 楼栋编号
      buildingCode: '',
      //区域名
      areaname: '',
      //楼栋层数
      areabuldingfloor: 0,
      //楼层选择状态
      buttonindex: '',
      //楼栋id
      buildingid: '',
      //楼层详细数据
      floorinformation: {},
      //具体房间分页数据
      pageSize: 30,
      pageNum: 1,
      recordCount: 0,
      currentPage: 1,
      //分页房间数据
      rooomlistArr: [],
      bulingname: '',
      bulingnametwo: '',
      //楼栋房间信息
      buildingobj: {},
      //回调demo对象
      callbackdemo: {},
      //区域楼栋负责人
      principalarr: [],
      //页面高度
      bodyheight: {
        height: '0px'
      },
      /**
       * 中间件
       */
      // 单位配置信息
      middlewareGuid: '',
      middlewareName: '',
      unitConfig: {
        singleMiddleware: 1
      },
      middlewareOption: [],
      middlewareVisible: false,
      middlewareFrom: {
        middlewareGuid: ''
      },
      middlewareFromRule: {},
      // 判断绑定楼栋还是楼层
      isFloor: true
    }
  },
  watch: {},
  components: {
    AddOrUpdate,
    AddRoomUpdate,
    EidtRoom
  },
  mounted() {
    this.getarea()
    // this.setCheckedKeys()
    this.getuserunit()
    this.getheight()
  },
  created() {
    this.userGuid = sessionStorage.getItem('administrator')
    this.getunitconfiguration()
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      },
      schoolName: {
        get() {
          return this.$store.state.user.schoolName
        }
      }
    }
  },
  filters: {
    filetertype: function(roomType) {
      if (roomType == 0) {
        return (roomType = '房间')
      }
      if (roomType == 1) {
        return (roomType = '食堂窗口')
      }
      if (roomType == 3) {
        return (roomType = '小卖部')
      }
      if (roomType == 2) {
        return (roomType = '通道门')
      }
      if (roomType == 4) {
        return (roomType = '公共场所')
      }
    }
  },
  methods: {
    /**
     * 中间件
     */
    //单位配置信息,识别是否是多中间件
    getunitconfiguration() {
      this.$http({
        url: this.$http.adornUrl('/manager/unit-config'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.unitConfig = { ...data.messageContent }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 获取所有中间件列表
    getmiddlewareOption() {
      this.$http({
        url: this.$http.adornUrl('/middleware/list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.middlewareOption = data.messageContent || []
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 打开
    middlewareShow(type) {
      if (type) {
        this.isFloor = true
      } else {
        this.isFloor = false
      }
      this.middlewareFrom.middlewareGuid = ''
      this.$http({
        url: this.$http.adornUrl('/middleware/list'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.middlewareOption = data.messageContent || []
          this.middlewareVisible = true
          if (this.isFloor) {
            this.middlewareFrom.middlewareGuid =
              data.messageContent.middlewareGuid || ''
          }
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 取消
    middlewarecloseDialog() {
      this.$refs['middlewareFrom'].resetFields()
      this.middlewareVisible = false
    },
    // 确定
    middlewareSubmit() {
      this.$http({
        url: this.$http.adornUrl('/middleware/middleware-bind'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            buildingGuid: this.buildingid,
            layer: this.buttonindex + 1,
            middlewareGuid: this.middlewareFrom.middlewareGuid,
            unitGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          this.getroomlist(this.buildingid, this.buttonindex)
          this.middlewarecloseDialog()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    // 楼栋绑定确定
    middlewareBuldSubmit() {
      this.$http({
        url: this.$http.adornUrl('/middleware/middleware-bind-building'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            buildingGuid: this.buildingid,
            middlewareGuid: this.middlewareFrom.middlewareGuid,
            unitGuid: this.changeschoolid
          },
          messageType: this.messageType
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          this.$message({
            message: '绑定成功',
            type: 'success'
          })
          this.getroomlist(this.buildingid, this.buttonindex)
          this.middlewarecloseDialog()
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    /**
     *
     */
    getheight() {
      //  console.log(document.getElementById('pane-area-building-area-building-info').offsetHeight)
      let height = document.getElementById(
        'pane-area-building-area-building-info'
      ).offsetHeight
      this.bodyheight.height = height + 'px'
      console.log(this.bodyheight)
    },
    getPath(node) {
      var text
      if (node.parent && node.parent.label) {
        // 有父节点，则递归去处理
        text = this.getPath(node.parent)
        text = text + ' / ' + node.label
      } else {
        text = node.label
      }
      console.log(text)
      return text
    },
    //回调点击事件
    callbackclick(val) {
      this.setCurrentRow(val)
    },
    setCurrentRow(val) {
      this.$refs.tree.setCurrentKey(val)
      this.clickNode(
        this.$refs.tree.getCurrentNode(val),
        this.$refs.tree.getNode(val)
      )
    },
    //滑入滑出事件
    mouseenter(data) {
      this.$set(data, 'del', true)
    },
    mouseleave(data) {
      this.$set(data, 'del', false)
    },
    //树状数据添加
    recursiveget(treedata) {
      for (var i in treedata) {
        if (treedata[i].type == 'area') {
          treedata[i].icon = 'el-icon-map-location'
          this.recursiveget(treedata[i].children)
        } else {
          treedata[i].icon = 'el-icon-office-building'
          this.recursiveget(treedata[i].children)
        }
      }
      return treedata
    },
    //上级部门数据
    getarealsit(arealsit) {
      for (var i in arealsit) {
        if (arealsit[i].type == 'area') {
          var itemobj = {
            label: arealsit[i].label,
            value: arealsit[i].name
          }
          this.arealsit.push(itemobj)
          this.getarealsit(arealsit[i].children)
        }
      }
    },
    //获取区域楼栋信息
    getarea(val) {
      this.arealsit = []
      this.treedata = []
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-tree'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.treedata = this.recursiveget(data.messageContent)
          this.getarealsit(data.messageContent)
          setTimeout(() => {
            this.callbackclick(val)
          }, 100)
          console.log(this.treedata)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //新增区域
    addarea() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinit()
        console.log(this.$refs.addOrUpdate)
      })
    },
    // 新增楼栋
    addbuilding() {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinitbuilding()
      })
    },
    append(node, data) {
      if (data.type == 'area') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.eidtinit(node, data)
        })
      } else if (data.type == 'building') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.eidtinitbuilding(data, this.changeschoolid)
        })
      }
    },
    remove(node, data) {
      // console.log(data)
      if (data.type == 'building') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.delebulding(data.name, node.parent.data.name)
        })
      }
      if (data.type == 'area') {
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.deletarea(data.name)
        })
      }
    },
    addend(node, data) {
      // console.log(node)
      // console.log(data)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.addinitbuilding(data.name)
      })
    },
    //修改区域
    editarea() {},
    //节点点击回调
    clickNode(obj, node) {
      console.log(obj)
      if (node != null) {
        //     getPath(node) {
        //   var text;
        //   if (node.parent && node.parent.label) {
        //     // 有父节点，则递归去处理
        //     text = this.getPath(node.parent);
        //     text = text + " / " + node.label;
        //   } else {
        //     text = node.label;
        //   }
        //   return text;
        // },
        this.titlename = this.getPath(node)
      }
      this.showlist = ''
      if (obj == null) {
        return
      }
      if (obj.type == 'area') {
        // alert('触发')
        this.addOrUpdateVisible = true
        this.showlist = 'area'
        if (this.areaid == obj.name) {
          return
        }
        this.areaid = obj.name
        this.getbulidinglist(obj.name)
        this.$nextTick(() => {
          this.$refs.addOrUpdate.setid(obj.id)
        })
      }
      if (obj.type == 'building') {
        console.log(obj.name)
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.setid(obj.id)
        })
        this.bulingname = obj.label
        this.buttonindex = ''
        this.showlist = 'building'
        this.floorinformation = {}
        this.rooomlistArr = []
        this.recordCount = 0
        this.buildingid = obj.name
        this.areaname = node.parent.label
        this.areabuldingname = obj.label
        this.areabuldingfloor = obj.layer
        this.addroomupdateVisible = true
        this.editroomVisible = true
        this.areaidinfo = node.parent.data.name
        this.$nextTick(() => {
          this.$refs.AddRoomUpdate.gebuilddetails(
            this.buildingid,
            this.changeschoolid,
            this.areaidinfo
          )
        })
        this.$nextTick(() => {
          this.$refs.eidtRoom.eidtifo(this.areaidinfo)
        })
        // 显示第一层的房间
        this.checkfloors(0)
      }
    },
    //获取区域楼栋信息
    getbulidinglist(val) {
      this.$http({
        url: this.$http.adornUrl('/area/room/get-area-building'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            areaGuid: val
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          this.buldingdata = data.messageContent
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //右侧楼栋修改
    editbulding(data) {
      // console.log(data)
      // return
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.eidtinitbuilding(data)
      })
    },
    //右侧楼栋删除
    deletbulding(data) {
      console.log(data)
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.delebulding(data.buildingGuid, data.areaGuid)
      })
    },
    //获取右侧楼栋房间信息
    getroomlist(buildingGuid, layer) {
      //  console.log(val)
      //  return
      this.$http({
        url: this.$http.adornUrl('/area/room/build-layer-details'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            buildingGuid: buildingGuid,
            unitGuid: this.changeschoolid,
            layers: layer + 1
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.floorinformation = data.messageContent
          this.buildingCode = data.messageContent.buildingCode
          this.middlewareGuid = data.messageContent.middlewareGuid
          this.middlewareName = data.messageContent.middlewareName
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //选择楼层
    checkfloors(val) {
      this.pageNum = 1
      this.buttonindex = val
      this.getroomlist(this.buildingid, this.buttonindex)
      this.getlayersroomlist(this.buttonindex + 1)
      this.addroomupdateVisible = true
      //获取楼栋
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.getfloors(this.buttonindex + 1)
      })
    },
    //房间分页
    handleSizeChange(val) {
      this.pageSize = val
      this.getlayersroomlist(this.buttonindex + 1)
      this.addroomupdateVisible = true
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.getpagesize(val)
      })
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.getlayersroomlist(this.buttonindex + 1)
      this.addroomupdateVisible = true
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.getpagenume(val)
      })
    },
    afterDeleteRoom(layer, size, page) {
      var total = 0
      if (this.currentPage - 1 > 0) {
        total = (this.currentPage - 1) * this.pageSize
      }
      if (this.recordCount - 1 <= total) {
        // alert('1255')
        // 需要往前翻一页
        this.getlayersroomlist(layer, this.pageSize, this.currentPage - 1)
      } else {
        this.getlayersroomlist(layer, this.pageSize, this.currentPage)
      }
    },
    //指定楼栋下的房间信息分页查询
    getlayersroomlist(val, pagesize, pagenum) {
      this.$http({
        url: this.$http.adornUrl('/area/room/room-details-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: pagenum == null || undefined ? this.pageNum : pagenum,
            pageSize: pagesize == null || undefined ? this.pageSize : pagesize,
            searchInfo: {
              buildingGuid: this.buildingid,
              layers: val,
              unitGuid: this.changeschoolid
            }
          },
          messageType: 0
        })
      }).then(({ data }) => {
        if (data.messageCode == 200) {
          console.log(data)
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
          this.rooomlistArr = data.messageContent.data
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    //新增房间
    addroom() {
      if (this.buttonindex === '') {
        this.$message({
          message: '请选择楼层',
          type: 'warning'
        })
        return
      }
      this.addroomupdateVisible = true
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.addroominit(
          this.areabuldingname,
          this.buttonindex
        )
      })
    },
    //绑定网关
    bundlegateway() {
      if (this.buttonindex === '') {
        this.$message({
          message: '请选择楼层',
          type: 'warning'
        })
        return
      }
      this.addroomupdateVisible = true
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.bundlegatewayinit()
      })
    },
    //修改房间
    editbroom(item) {
      this.editroomVisible = true
      console.log(item)
      this.$nextTick(() => {
        this.$refs.eidtRoom.eidtroom(
          item,
          this.areabuldingname,
          this.buildingid,
          this.buttonindex + 1,
          this.buildingCode
        )
      })
    },
    //删除房间
    deletroom(item) {
      this.addroomupdateVisible = true
      this.$nextTick(() => {
        this.$refs.AddRoomUpdate.deletroominit(item)
      })
    },
    //获取单位普通用户
    getuserunit() {
      this.principalarr = []
      this.$http({
        url: this.$http.adornUrl('/sys/user-unit'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            unitGuid: this.changeschoolid,
            userGuid: this.userGuid
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        if (data.messageCode == 200) {
          for (var i = 0; i < data.messageContent.length; i++) {
            let newobj = {
              label: data.messageContent[i].userName,
              value: data.messageContent[i].userGuid
            }
            this.principalarr.push(newobj)
          }
          //  console.log(this.principalarr)
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.are_building_info {
  height: 100%;
  .all_main {
    height: 100%;
    .line {
      height: 100%;
      width: 2px;
    }
    .all_left {
      /deep/.el-button--mini,
      .el-button--mini.is-round {
        padding: 7px;
      }
      // height: 400px;
      height: 100%;
      // border-right: 2px solid #ccc;
      .bg-purple {
        height: 100%;
        width: 100%;
        // overflow-x: scroll;
        white-space: nowrap;
        // padding: 0 10px 0 0px;
        .header_title {
          padding: 20px 0;
          font-weight: bolder;
          text-align: center;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
          overflow: hidden;
        }
        .add_button {
          display: flex;
          padding-top: 10px;
          justify-content: center;
          border-bottom: 1px solid #e5e9f2;
          padding-bottom: 10px;
          overflow: hidden;
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          overflow-y: auto;
          width: 10px;
          height: 10px;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #a1a3a9;
          border-radius: 3px;
        }
        .tree_list {
          height: calc(100vh - 220px);
          width: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          /deep/.el-tree-node__content > .el-tree-node__expand-icon {
            padding: 1px;
          }
          &::-webkit-scrollbar {
            width: 0;
            height: 0;
            background-color: transparent;
          }
          /deep/.el-button--mini,
          .el-button--mini.is-round {
            padding: 0px 0px;
          }
          .custom-tree-node {
            // padding-left: 10px;
            /deep/.el-button + .el-button {
              margin-left: 0px;
            }
            //
            font-size: 12px;
            .colorfont {
              color: #17b3a3;
            }
          }
        }
      }
    }
    .all_right {
      height: calc(100vh - 130px);
      overflow: auto;

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      // border-left: 2px solid #ccc;
      // padding: 0px 5px;
      #nam_type {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-bottom: 5px;
        > span:nth-child(1) {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          flex: 1;
        }
        > span:nth-child(2) {
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
          flex: 1;
        }
      }
      #bianhao {
        > span {
          text-align: left;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          word-break: keep-all;
        }
      }
      .bg-purple-light {
        height: 100%;
        .area_building_main,
        .building_romm_list {
          // margin-top: 5px;
          // padding: 0px 10px;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          .textbox {
            margin-top: 10px;
            width: 175px;
            margin-right: 5px;
            .building_list {
              font-size: 12px;
              .box-card {
                // padding: 0 5px;
                .textmain {
                  height: 156px;
                  font-weight: bolder;
                  color: #909399;
                  padding: 5px 5px;

                  white-space: nowrap;
                  p {
                    margin-block-start: 0em;
                    margin-block-end: 0em;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: keep-all;
                    display: flex;
                  }
                  .textitem {
                    margin-bottom: 5px;
                    margin-top: 10px;
                    p {
                      margin-bottom: 5px;
                    }
                  }
                  .titlename {
                    width: 65px;
                    display: inline-block;
                    text-align: left;
                  }
                  .tittlecode {
                    display: inline-block;
                    text-align: left;
                    width: 50px;
                    margin-right: 5px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: keep-all;
                  }
                  .tittlecodeone {
                    width: 70px;
                  }
                }

                // .toptitle{
                //   width:65px;
                // }
                // .textitem{
                //   font-weight: bolder;
                //   color: #909399;
                //   padding: 5px 5px;
                //   .title{
                //     overflow:hidden;
                //     text-overflow:ellipsis;
                //     white-space:nowrap;
                //     word-break:keep-all;
                //   }
                //   .bulding_css{
                //     margin-left:32px;
                //     margin-top: 0px;
                //     margin-bottom: 0px;
                //     text-indent:-32px;
                //   }
                .build-padding {
                  padding: 20px 5px;
                }
                // }
                // .textitemname{
                //   font-weight: bolder;
                //   color: #909399;
                //   padding: 5px 5px;
                //   display:flex;
                //   -webkit-flex-wrap: wrap;
                //   justify-content: space-between;
                //   margin-bottom: 10px;
                // }
                .textitemfoort {
                  height: 100%;
                  border-top: 1px solid #e5e9f2;
                  .bulding_caozuo {
                    padding: 2px 0px;
                    height: 30px;
                    .bulding_font_size,
                    .bulding_font_size1 {
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      border-right: 1px solid #e5e9f2;
                      .el-button--medium {
                        font-size: 18px;
                        padding: 5px 20px;
                      }
                    }
                    .bulding_font_size1 {
                      border-right: 0px solid #e5e9f2;
                    }
                  }
                }
              }
            }
          }
        }
        .building_room_mian {
          margin-top: 5px;
          // padding: 0px 10px;
          .box-card1 {
            padding: 10px;
            .textitem1 {
              color: #909399;
              padding-bottom: 5px;
            }
            .textitem2 {
              border-bottom: 1px solid #e5e9f2;
              padding-bottom: 5px;
              .contcolor {
                color: #fff;
                background-color: #45c2b5;
              }
              .el_col_button {
                margin-bottom: 5px;
              }
              #add_room {
                .el-button--mini,
                .el-button--small {
                  width: 50px !important;
                }
              }
            }
            .textitem3 {
              .textitem3_box {
                height: 50px;
                font-size: 16px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bolder;
                color: #909399;
              }
              .textitem3_box1 {
                color: #909399;
                padding-bottom: 10px;
                .textitem3_box1_one {
                  padding-top: 10px;
                }
              }
              .addroom {
                display: flex;
                // justify-content: center;
                align-items: center;
              }
            }
          }
        }
        .header_title {
          padding: 10px 0 20px 0;
          font-weight: bolder;
          //  text-align: center;
          padding-left: 20px;
          border-bottom: 1px solid #e5e9f2;
          color: #909399;
        }
        .page {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .suspension {
          width: 630px;
          position: absolute;
          height: 30px;
          bottom: 5%;
          right: 2%;
          .el-card,
          .el-message {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 10px;
            width: 100%;
            .el-card__body {
              height: 100%;
              .el-radio + .el-radio {
                margin-left: 10px;
              }
            }
          }
          .status_panel {
            display: flex;
            > div {
              display: flex;
              align-items: center;
              margin-right: 10px;
              .zaixian,
              .lixian,
              .jinggao {
                width: 15px;
                height: 15px;
                background-color: #67c23a;
                display: inline-block;
                margin-right: 5px;
              }
              .lixian {
                background-color: #f56c6c;
              }
              .jinggao {
                background-color: #e6a23c;
              }
            }
          }
        }
      }
    }
  }
}
</style>